<template>
	<!-- 推拿按摩-组件 -->
	<view>
		<view class="appointment-a">
			<view class="dec">{{text}}</view>
			<u--form :model="model" :rules="rules" ref="uForm">
				<view class="panel">
					<u-form-item label="职称及机构要求" prop="room_type" labelWidth="120" borderBottom
						@click="select.room_type.show=!select.room_type.show">
						<u--input v-model="model.room_type" placeholder="" disabled border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
						<u-picker :show="select.room_type.show" :columns="config.columns"
							@confirm="select.room_type.confirm($event,'room_type')"></u-picker>
					</u-form-item>
					<u-form-item label="预约时间" prop="datetime" labelWidth="120" borderBottom
						@click="select.datetime.show=!select.datetime.show">
						<u--input v-model="model.datetime" placeholder="" disabled border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
						<u-datetime-picker :show="select.datetime.show" v-model="time_int" mode="datetime"
							@confirm="select.datetime.confirm($event,'datetime')"></u-datetime-picker>
					</u-form-item>
					<u-form-item label="预约地址" prop="address" labelWidth="120" borderBottom @click="select.address.open">
						<u--input v-model="model.address" placeholder="" disabled border="none"></u--input>
						<u-icon slot="right" name="map" color="#4cd4e6"></u-icon>
					</u-form-item>
					<u-form-item label="出车费" prop="fare" labelWidth="120" borderBottom>
						<u--input v-model="model.fare" placeholder="" border="none"></u--input>
						<u-icon slot="right" name="arrow-right">
							<template #before>元</template>
						</u-icon>
					</u-form-item>
					<u-form-item label="价格" prop="price" labelWidth="120" borderBottom>
						<u--input v-model="model.price" placeholder="价格" border="none"></u--input>
						<u-icon slot="right" name=" ">
							<template #before>元</template>
						</u-icon>
					</u-form-item>
					<u-form-item label="发布个数" prop="quantity" labelWidth="120">
						<u--input v-model="model.quantity" placeholder="请填写发布个数" border="none"></u--input>
						<u-icon slot="right" name=" ">
							<template #before>个</template>
						</u-icon>
					</u-form-item>
				</view>
				<view class="panel">
					<view class="label">
						<u-form-item label="备注" prop="remarks" labelWidth="120" labelPosition="top">
							<u--textarea v-model="model.remarks" placeholder="请详细描您的服务需求" count
								maxlength="200"></u--textarea>
						</u-form-item>
					</view>
				</view>
			</u--form>
		</view>
		<view class="commonBtn bottom">
			<view class="left">
				总金额￥<text>59.8</text>
			</view>
			<view class="right" @click="handleClickConfirm">发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tuinaMassage",
		data() {
			return {
				text: "说明：不含诊疗，听讲人1~5人，超出请在兼职下单。",
				config: {
					columns: [
						["初级士", "基层医院"]
					]
				},
				model: {
					room_type: "初级士", //职称及机构要求
					datetime: " ", //预约时间
					address: " ", //预约地址
					fare: "30", //出车费
					price: " ", //费用
					remarks: "", //备注
				},
				rules: {
					room_type: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					datetime: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					fare: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					price: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
				},
				select: {
					room_type: {
						show: false,
						confirm: (item, key) => {
							this.model[key] = item.value[0];
							this.select[key].show = !this.select[key].show;
						}
					},
					datetime: {
						show: false,
						formatter: "yyyy-mm-dd hh:MM:ss",
						confirm: (item, key) => {
							this.model[key] = uni.$u.timeFormat(item.value, "yyyy-mm-dd hh:MM:ss");
							this.select[key].show = !this.select[key].show;
						}
					},
					address: {
						show: false,
						open: () => {
							uni.chooseLocation({
								success: (res) => {
									this.model.address = res.name || res.address;
									// this.$emit("confirm", res);
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
								}
							});
						}
					}
				},
				time_int: Number(new Date())
			};
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm?.setRules(this.rules)
		},
		methods: {
			handleClickConfirm() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
				console.log("confirm");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appointment-a {
		margin: 0 24rpx;

		.dec {
			font-size: 24rpx;
			font-weight: 400;
			margin: 16rpx 0 16rpx 16rpx;
			color: rgba(152, 160, 166, 1);
		}

		.panel {
			padding: 0 24rpx 24rpx;
			background-color: #FFF;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 12rpx 0;
		}

		::v-deep .u-input__content__field-wrapper {
			width: max-content;

			.input-placeholder {
				text-align: right !important;
				background-color: #FFF !important;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(54, 68, 79, 1);
			}

			.u-input__content__field-wrapper__field {
				text-align: right !important;
				background-color: #FFF !important;
			}
		}

		.label {
			::v-deep .u-form-item__body__left__content__label {
				// color:red !important;
				margin-bottom: 24rpx;
				;
			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			color: rgba(255, 140, 64, 1);
			font-size: 28rpx;
			font-weight: 400;
			margin-left: 24rpx;

			>text {
				font-size: 40rpx;
				font-weight: 600;
			}
		}

		.right {
			border-radius: 24rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFF;
			width: 288rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $theme-color;
			margin: 24rpx;
		}
	}
</style>